<template>
  <div class="input-wrapper">
    <div></div>
    <div>
      <el-input
        ref="messageInput"
        v-model="message"
        :rows="4"
        type="textarea"
        placeholder="请输入消息"
        @keydown.shift.enter.prevent
        @keyup.ctrl.enter.prevent="lineBreak"
        @keydown.enter.exact.prevent="handleSend"
      />
    </div>
    <div class="chat-op">按Enter键发送,Ctrl+Enter换行</div>
  </div>
</template>
<script setup lang="ts">
const message = ref("");
const messageInput = ref();
const emit = defineEmits(["send"]);

function lineBreak() {
  const textarea = messageInput.value.textarea; //获取输入框元素
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const value = textarea.value;
  const newValue = value.substring(0, start) + "\n" + value.substring(end);
  textarea.value = newValue;
  textarea.selectionStart = textarea.selectionEnd = start + 1;
}

function handleSend() {
  emit("send", message.value);
}
</script>
<style scoped lang="scss">
.input-wrapper {
  padding: 10px;
  :deep(.el-textarea__inner) {
    box-shadow: none;
    resize: none; /* 禁止用户拖动改变大小 */
  }
  .chat-op {
    font-size: 14px;
    color: #ccc;
    text-align: right;
  }
}
</style>
